<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <div class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
    </div>
</body>
<script>
    // 通过jquery方法获取的元素 放在伪数组(类数组)中(jquery对象)

    // 注意: 
    // 原生dom只能使用原生的属性和方法 , 不能使用jquery的方法
    // jquery对象只能jquery的属性和方法 ,不能使用原生的

    // first.css({})   错误的
    // $(".first").innerHTML  有问题

    // 如果原生dom元素想使用jquery的方法  获取jquery对象想使用原生的属性和方法 => 原生dom和jquery对象的相互转换


    // (原生转jquery对象)  $()中传入一个原生dom元素 或 原生dom元素的集合    => 返回对应的jquery对象
    // var first = document.getElementsByClassName("first")[0];
    // console.dir(first)
    // console.log($(first));   // [first]
    // $(first).css({ background: "red" })  

    // var liList = document.querySelectorAll(".first,.last");
    // console.log($(liList));  // [first,last]
    // $(liList).css({ background: "red" })

    // $(".list li").click(function () {
    //     console.log(this); // 原生dom元素  => 不能使用jquery的方法
    //     $(this).addClass("active").siblings().removeClass("active");
    // })


    // jquery对象转原生 
    console.log($(".list li"));
    // 1.jquery对象(伪数组) =>  对应下标取值,循环遍历
    console.log($(".list li")[0]);

    // 2. 伪数组转真数组
    // a. 新建数组遍历伪数组 => 将每个元素放到新数组
    // b. Array.from()     Array.prototype.slice.call($(".list li"))
    // c. ...      新版本可以,老版本不行

    // var list = Array.from($(".list li"));
    // var list = Array.prototype.slice.call($(".list li"));
    // console.log(list);

    // var list = [...$(".list li")];  // 新版本可以,老版本不行
    // console.log(list);


    // 3. jquery中自带的方法 ( jquery对象转原生 )
    // get(index)  => 返回对应下标的元素(原生dom)
    // get()      => 返回jquery对象对应的真数组

    console.log($(".list li").get(0));
    console.log($(".list li").get());
</script>
</html>